<template>
  <div class="tag-chart" ref="chartRef" style="width: 100%; height: 250px;"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const chartRef = ref(null)
let chartInstance = null

const option = {
  tooltip: {},
  series: [{
    type: 'wordCloud',
    gridSize: 8,
    sizeRange: [16, 40],
    rotationRange: [0, 0],
    shape: 'circle',
    width: '100%',
    height: '100%',
    textStyle: {
      color: function () {
        // 随机色
        const colors = [
          '#3399FF', '#33CCFF', '#99E6B3', '#FFD666',
          '#FF9C6E', '#FF85C0', '#B37FEB', '#B5B5FF',
          '#666', '#52C41A', '#faad14', '#13c2c2', '#eb2f96'
        ]
        return colors[Math.floor(Math.random() * colors.length)]
      }
    },
    data: [
      { name: 'JavaScript', value: 100 },
      { name: 'Android', value: 80 },
      { name: 'CSS', value: 60 },
      { name: 'html', value: 50 },
      { name: 'vue', value: 30 },
      { name: 'java', value: 28 },
      { name: '数据结构', value: 26 },
      { name: '极限算法', value: 24 },
      { name: '0-1背包', value: 22 },
      { name: 'PTA', value: 20 },
      { name: 'databinding', value: 18 },
      { name: 'mvvm', value: 16 },
      { name: '旅行前', value: 14 },
      { name: 'Nginx', value: 12 },
      { name: 'linux', value: 10 },
      { name: 'ubuntu', value: 8 },
      { name: '图角色', value: 6 }
    ]
  }]
}

onMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(option)
  window.addEventListener('resize', resizeChart)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  if (chartInstance) chartInstance.dispose()
})

function resizeChart() {
  if (chartInstance) chartInstance.resize()
}
</script>

<style scoped>
.tag-chart {
  width: 100%;
  height: 250px;
}
</style>
